<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">企业详情</block>
		</cu-custom>
		<view>
			<view style="width: 100%; height: 350rpx;">
				<image style="width: 100%; height: 300rpx; z-index: -1; filter:brightness(80%)" src="../../static/compang_deatil.png"></image>
			</view>
			<view class="picplace">
				<block>
					<image style="width: 110rpx; height: 110rpx; border-radius: 10rpx; background-color: white; "
						:src="company_info.logo" v-if="company_info.logo" mode="aspectFill"></image>

					<view v-else
						style="width: 110rpx; height: 110rpx; border-radius: 10rpx; background-color: #2C405A; 
						color: #FFFFFF; font-size: 50rpx;
						text-align: center; padding: 25rpx; display: inline-block;">
						{{company_info.company_name[0]}}
					</view>
				</block>
			</view>
			<view class="firinfobox">
				<view class="schoolName"
					style="width: 100%; background-color: #FFFFFF; padding: 65rpx 0rpx 30rpx 0rpx;">
					<view style="font-size: 40rpx; font-weight: bold; margin-bottom: 10rpx;">
						{{company_info.company_name}}
					</view>
					<text class="tabwords">{{company_info.address}}</text>
					<!-- <text class="symbols">|</text> -->
					<!-- <text class="tabwords">{{company_info.phone}}</text> -->
					<!-- <text class="symbols">|</text> -->
					<!-- <text class="tabwords">100-499人</text> -->
					<text class="symbols">|</text>
					<text class="tabwords">{{company_info.tags}}</text>
				</view>
			</view>
		</view>
		<view>
			<scroll-view scroll-x class="bg-white nav text-left text-bold solid-bottom"
				style="margin-top: 20rpx; font-size: 30rpx; color: black;">
				<view class="cu-item" :class="0==TabCur?'text-blue cur':''" @tap="tabSelect" data-id="0">
					实训岗位
				</view>
				<view class="cu-item" :class="1==TabCur?'text-blue cur':''" @tap="tabSelect" data-id="1">
					企业信息
				</view>
			</scroll-view>
			<view v-if="TabCur==0" class="cu-list menu-avatar solid-bottom bg-white">
				<view class="firm bg-white solid-bottom" v-for="(item,index) in list" :key="index" @tap="showModal"
					data-target="bottomModal" :data-job_id="item.job_id" :data-id="index">
					<view class="listinfos flex">
						<view class="postlist" style="width: 650rpx;">
							<view style="font-size: 35rpx; color: black; margin-bottom: 20rpx;">{{item.job_name}}</view>
							<view>
								<text class="iconfont icon-dizhi"></text>
								<text class="wordpic">{{item.city}}</text>
								<text class="worddiqu"></text>
								<text class="iconfont icon-gongzuo"></text>
								<text class="wordpic">{{item.workage}}</text>
								<text class="worddiqu"></text>
								<text class="iconfont icon-xueli">{{item.qualifications}}</text>
							</view>
						</view>
						<view class="butapply">
							<block>
								<button class="shenqing" v-if="student_info.job_id == ''">申请</button>
								<button  v-else class="noshenqing"></button>
							</block>
							<!-- <button class="shenqing">
								<text style="font-size: 30rpx; color: #3b73f6;">申请</text>
							</button> -->
						</view>
					</view>
				</view>
			</view>
			<view v-if="TabCur==1" class="firmsinfo">
				<view class="infos">
					
					<view class="imgpic">
						<view>
							<block>
								<image style="width: 260rpx; height: 260rpx; margin-bottom: 20rpx;" :src="company_info.logo" v-if="company_info.logo"
									mode="aspectFill"></image>
						
								<view v-else
									style="width: 260rpx; height: 260rpx; margin-bottom: 20rpx; border-radius: 10rpx; background-color: #2C405A; 
									color: #FFFFFF; font-size: 70rpx;
									text-align: center;line-height: 260rpx;">
									{{company_info.company_name[0]}}
								</view>
							</block>
						</view>
						
						<view class="companytit">{{company_info.company_name}}</view>
					</view>
					<view class="titlist">
						<view class="titletag">公司详情:</view>
						<view class="wormsg">{{company_info.tags}}</view>
					</view>
					<view class="titlist">
						<view class="titletag">成立时间:</view>
						<view class="tiemword">{{timeToStr(company_info.add_time,"YY-MM-dd")}}</view>
					</view>
					<view class="titlist">
						<view class="titletag">法人代表:</view>
						<view class="wormsg">{{company_info.contacts}}</view>
					</view>
					<view class="titlist">
						<view class="titletag">公司地址:</view>
						<view class="wormsg">{{company_info.address}}</view>
					</view>
					<view class="titlist">
						<view class="titletag">联系方式:</view>
						<view class="wormsg">{{company_info.phone}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''" style="border-radius: 5rpx;">
			<view class="cu-dialog">
				<view class="modal_box">
					<view class="control_box flex">
						<view class="apply_text">申请加入</view>
						<text class="cancel_text iconfont icon-guanbi" @tap="hideModal"></text>
					</view>
					<view class="imput_information">
						<view class="input_box flex">
							<text class="iconfont icon-weibiaoti562 person_box"></text>
							<text class="linkman">联系人</text>
							<input placeholder="请输入您的姓名" style="margin-left: 58rpx; text-align: left;"
								v-model="contacts" />
						</view>
						<view class="input_box input_phone flex">
							<text class="iconfont icon-shoujihao person_box"></text>
							<text class="linkman">手机号</text>
							<input placeholder="请输入您的手机号" style="margin-left: 58rpx; text-align: left;"
								v-model="phone" />
						</view>
						<view>
							<button class="button_apply" @tap="get_jobinfo">立即申请</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		msg,
		timeToStr
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				TabCur: 0,
				modalName: null,
				url: 'http://n.sinaimg.cn/translate/249/w639h410/20190119/6NTg-hrvcwnk8408646.jpg',
				url_a: 'http://www.555edu.com/d/file/2018-04-03/1617f058d34fa3d52031266d389580e2.jpg',
				// job_id:'',
				company_id: '',
				company_info: {},
				status: 1,
				page: 1,
				page_size: 20,
				job_id: '',
				list: [],
				contacts: '',
				phone: '',
				timeToStr: timeToStr,
			}
		},
		onLoad(option) {
			appLogin((user_info) => {

				this.company_id = option.company_id
				console.log(this.company_id)
				// this.get_jobinfo()
				this.entrance()
				this.getfirminfo()
				this.getstudentinfo()
			})
		},
		methods: {
			getstudentinfo() {
				httpGet({
					url: '/api/student/info'
				}).then((res) => {
					this.student_info = res.result
					console.log(res)
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				console.log(this.TabCur)
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			showModal(e) {
				this.job_id = e.currentTarget.dataset.job_id
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			entrance() {
				httpGet({
					url: '/api/company/job_list',
					data: {
						company_id: this.company_id,
						status: this.status,
						page: this.page,
						page_size: this.page_size
					}
				}).then((res) => {
					console.log(res)
					this.list = res.result.list
					console.log(this.list)
					this.hideModal()
				})
			},
			get_jobinfo() {
				if (!this.contacts) {
					uni.showToast({
						title: '请输入联系人姓名',
						duration: 2000
					});
					return;
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入电话号码',
						duration: 2000
					});
					return;
				}
				httpGet({
					url: '/api/student/join_company',
					data: {
						job_id: this.job_id,
						company_id: this.company_id,
						contacts: this.contacts,
						phone: this.phone,
					}
				}).then((res) => {
					console.log(res)
					msg(res.msg)
					this.hideModal()
				})
			},
			getfirminfo() {
				httpGet({
					url: '/api/company/info',
					data: {
						company_id: this.company_id
					}
				}).then((res) => {
					console.log(res)
					this.company_info = res.result
				})
			}
		}
	}
</script>

<style>
	.firinfobox {
		width: 100%;
		margin-top: -50rpx;
		padding-left: 30rpx;
		background-color: white;
	}

	.picplace {
		margin: -110rpx 0 0 35rpx;
		/* margin-bottom: -55rpx; */
	}

	.tabwords {
		color: gray;
		font-size: 28rpx;
	}

	.symbols {
		padding: 0rpx 20rpx 0rpx 20rpx;
		color: gray;
	}

	.worddiqu {
		margin-left: 10rpx;
		margin-right: 20rpx;
	}

	.listinfos {
		width: 100%;
		height: 160rpx;
		background-color: white;
		padding: 30rpx;
	}

	.wordpic {
		margin-left: 5rpx;
	}

	.butapply {}
	.noshenqing{
		display: none;
	}

	.modal_box {
		height: 600rpx;
	}

	.cu-modal.bottom-modal .cu-dialog {
		border-radius: 30rpx 30rpx 0 0;
	}

	.control_box {
		margin-top: 35rpx;
	}

	.apply_text {
		font-size: 31rpx;
		color: #333333;
		font-weight: bold;
		margin-left: 314rpx;
	}

	.cancel_text {
		font-size: 26rpx;
		color: #c6c6c6;
		margin-left: 245rpx;
		margin-top: 7rpx;
	}

	.imput_information {
		margin-top: 58rpx;
	}

	.input_box {
		width: 684rpx;
		margin: auto;
		border-style: solid;
		border-color: #e5e5e5;
		border-width: 2rpx;
		height: 105rpx;
		border-radius: 10rpx;
		padding: 33rpx 25rpx;
	}

	.input_phone {
		margin-top: 25rpx;
	}

	.person_box {
		font-size: 35rpx;
		color: #3b73f6;
		margin-top: 2rpx;
	}

	.linkman {
		margin-left: 15rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.input_name {
		margin-left: 58rpx;
	}

	.button_apply {
		width: 688rpx;
		margin: auto;
		margin-top: 100rpx;
		background-color: #3b73f6;
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 98rpx;
		height: 98rpx;
		border-radius: 15rpx;
	}

	.but_box {
		height: 98rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-top-width: 1rpx;
		border-top-color: #e6e6e6;
		line-height: 98rpx;
		position: absolute;
		bottom: 0;
		padding-top: 13rpx;
	}

	.btn {
		height: 70rpx;
		width: 690rpx;
		border-radius: 90rpx;
		background-color: #3b73f6;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.shenqing {
		width: 130rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 50rpx;
		border: solid;
		border-color: #3b73f6;
		border-width: 1px;
		margin-top: 30rpx;
		font-size: 30rpx; 
		color: #3b73f6;
	}

	.infos {
		padding: 50rpx 30rpx 0rpx 30rpx;
	}

	.companytit {
		font-size: 40rpx;
		font-weight: bold;
	}

	.titletag {
		margin-right: 20rpx;
	}

	.imgpic {
		margin-bottom: 35rpx;
	}

	.titlist {
		display: flex;
		margin-bottom: 20rpx;
		font-size: 30rpx;
	}

	.wormsg {
		white-space: pre-wrap;
	}
</style>
